{% extends "layout.html" %} {% block content %}
<div class="container mx-auto p-6">
    <!-- 顶部导航 -->
    <header
        class="flex justify-between items-center mb-8 bg-white p-4 rounded shadow"
    >
        <h1 class="text-2xl font-bold text-blue-600">📚 图书管理系统</h1>
        <div class="flex items-center gap-4">
            <span class="text-gray-600"
                >欢迎,
                <span class="font-bold text-gray-800"
                    >{{ username }}</span
                ></span
            >
            <a
                href="/logout"
                class="text-red-500 hover:bg-red-50 px-3 py-1 rounded transition"
                >退出</a
            >
        </div>
    </header>

    <!-- 1. 添加图书表单 -->
    <section class="bg-white p-6 rounded shadow mb-8">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
            <span class="mr-2">➕</span> 新书入库
        </h2>
        <form
            action="/books/add"
            method="POST"
            class="grid grid-cols-1 md:grid-cols-12 gap-4"
        >
            <input
                type="text"
                name="book_name"
                placeholder="书名"
                required
                class="md:col-span-3 border p-2 rounded focus:ring-2 focus:ring-blue-300 outline-none"
            />
            <input
                type="text"
                name="author"
                placeholder="作者"
                required
                class="md:col-span-3 border p-2 rounded focus:ring-2 focus:ring-blue-300 outline-none"
            />
            <input
                type="number"
                name="copies"
                placeholder="副本数"
                value="1"
                min="1"
                required
                class="md:col-span-2 border p-2 rounded focus:ring-2 focus:ring-blue-300 outline-none"
            />
            <input
                type="text"
                name="synopsis"
                placeholder="简介 (选填)"
                class="md:col-span-2 border p-2 rounded focus:ring-2 focus:ring-blue-300 outline-none"
            />
            <button
                type="submit"
                class="md:col-span-2 bg-blue-600 text-white p-2 rounded hover:bg-blue-700 transition font-medium shadow"
            >
                入库登记
            </button>
        </form>
    </section>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 2. 馆藏列表 (解决 books 未使用警告) -->
        <section class="bg-white p-6 rounded shadow h-fit">
            <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
                📖 馆藏书目 (Total Books)
            </h2>
            <div class="overflow-x-auto max-h-[600px]">
                <table class="w-full text-sm text-left">
                    <thead class="bg-gray-100 text-gray-600 sticky top-0">
                        <tr>
                            <th class="px-3 py-2">ID</th>
                            <th class="px-3 py-2">书名</th>
                            <th class="px-3 py-2">作者</th>
                            <th class="px-3 py-2 text-center">副本数</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        {% for book in books %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-3 py-2">{{ book.id }}</td>
                            <td class="px-3 py-2 font-medium text-gray-800">
                                {{ book.book_name }}
                            </td>
                            <td class="px-3 py-2 text-gray-600">
                                {{ book.author }}
                            </td>
                            <td class="px-3 py-2 text-center">
                                <span
                                    class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full"
                                    >{{ book.number_of_copies }}</span
                                >
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% if books.len() == 0 %}
                <p class="text-center text-gray-400 py-4">暂无馆藏书籍</p>
                {% endif %}
            </div>
        </section>

        <!-- 3. 借阅管理 (Borrows) -->
        <section class="bg-white p-6 rounded shadow">
            <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
                📅 借阅与库存状态 (Copies & Borrows)
            </h2>

            <!-- 消息提示区 (HTMX 渲染位置) -->
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="bg-gray-100 text-gray-600">
                        <tr>
                            <th class="px-2 py-2">ID</th>
                            <th class="px-2 py-2">书名</th>
                            <th class="px-2 py-2">状态</th>
                            <th class="px-2 py-2">借阅时间/归还</th>
                            <th class="px-2 py-2">管理员</th>
                            <th class="px-2 py-2 text-center">操作</th>
                        </tr>
                    </thead>
                    <!-- HTMX 目标区域 -->
                    <tbody id="items-table" class="divide-y">
                        {% include "items_table.html" %}
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>
{% endblock %}
